<template>
  <div class="product-detail">
    <div class="product-container">
      <!-- 商品图片 -->
      <div class="product-gallery">
        <el-carousel :interval="5000" indicator-position="outside">
          <el-carousel-item v-for="(img, index) in product.images" :key="index">
            <img :src="img" :alt="product.name">
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 商品信息 -->
      <div class="product-info">
        <h1>{{ product.name }}</h1>
        <p class="description">{{ product.description }}</p>

        <div class="price-section">
          <span class="current-price">¥{{ product.price }}</span>
          <span class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</span>
        </div>

        <div class="actions">
          <el-input-number v-model="quantity" :min="1" :max="10" />
          <el-button type="danger" size="large" @click="addToCart">
            加入购物车
          </el-button>
          <el-button type="primary" size="large" @click="buyNow">
            立即购买
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>